<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="../css/i-club.css">
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
	</head>
			<style type="text/css">
			#paymentpaw{
			width: 100%;
			position:fixed;
			width: 100%;
			height: 100%;
			display: none;
			z-index: 9999;
			background: rgba(0,0,0,0.5);
		}
		.enter{
			width: 100%;
			background:#FFFFFF;
			z-index: 102;
			position: fixed;
			bottom:0;
			z-index: 102;
			height: 50%;

		}
		.enter-close{
			width: 100%;
			padding: 1% 0;
		}
		.enter-close i{
			width: 1.5em;
			height: 1.5em;
			display: block;
			float: right;
			margin-right: 3%;
			margin-top: 3%;
			font-style: normal;
		}
		.enter-text{
			width: 100%;
			text-align: center;
			color: #8D8D8D;
			border-bottom:2px solid #F5F5F5 ;
			padding: 2% 0;
			margin-bottom: 4%;
		}
		.enter-input{
			text-align: center;

		}
		.enter-input input{
			width: 90%;
			border: 1px solid #CCCCCC;
			padding: 2% 0;
			text-align: center;
			font-size: 16px;
			display: inline-block;

		}
		.queding{
			padding: 3%;
		}
		.queding span{
			width: 100%;
			display: block;
			background: #57d5f3;
			border-radius: 15px;
			color: #fff;
			padding: 5px 0;
			text-align: center;
		}
		</style>
	<body>
	<form action="">
		<div class="select">
			<div>
				<div class="center select-t">
					<p>发布项目</p>
					<img src="../img/cancel.png" class="close">
				</div>
				<div class="select-b">
					<p>提示：发布约会即扣除<span>10</span>美金</p>
					<div class="flex top-up-box">
						<p>支付金额：<span>￥310</span></p>
						<div class="top-up"><a href="">去充值</a></div>
					</div>
					<div class="sure center"><input type="button" id="submit" name="" value="确定发布"></div>
				</div>
			</div>
		</div>
		<div id="paymentpaw">

			<div class="enter">
				<div class="enter-close clearfix">
					<i>x</i>
				</div>
				<div class="enter-text">请输入支付密码</div>
				<div class="enter-input">
					<input type="password" name="pay" placeholder="输入支付密码">
				</div>

				<div class="queding"><span>确定发布</span></div>
			</div>
		</div>
		<header>
			<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
			<div class="center title">推拿会所</div>
		</header>
		<main>
			<div class="upload">
				<p>上传项目照片</p>
				<div class="flex upload_photo clearfix">
					<div class="add">+<input type="file" id="file" name="" multiple></div>
				</div>
			</div>
			<div class="item">
				<div class="flex">
					<p>项目名称：</p>
					<input type="text" name="tName">
				</div>
				<div class="flex">
					<p>项目地址：</p>
					<input type="text" name="tAddress">
				</div>
				<div class="flex">
					<p>项目介绍：</p>
					<textarea name="tProduce"></textarea>
				</div>
				<div class="flex money">
					<div class="flex">
						<p>项目价格：</p>
						<input type="text" name="tMeijin">
					</div>
					<div class="flex">
						<p>门市价格：</p>
						<input type="text" name="tMsmeijin">
					</div>
					<div class="flex">
						<p>置顶时长：</p>
						<input type="text" name="tZdtime">
					</div>
					<div class="flex">
						<p>置顶费用：</p>
						<p class="ZhiDingfei"><span>300</span>美金</p>
					</div>
				</div>
			</div>
		</main>

		<div class="parting-line"></div>
		<div class="fabu center">立刻发布</div>

	</form>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../layui/layui.js"></script>
        <script src="../layui/layui.all.js"></script>
		<script src="../js/i-party.js"></script>
	</body>
</html>
<script>
	var arr=[];
	$("#file").change(function() {
		//获取图片信息
		var fileLise = $(this)[0].files;
		var fileLength = fileLise.length;
		//然后循环 生成html 插入页面上 最后就赋值给img
		for (var i = 0; i < fileLength; i++) {
			var imgDiv = '<div class="imgDiv" style="width: 60px;height: 60px;display: inline-block;border: none;margin:0 15px;"><img style="width: 100%;height: 100%" id="img' + fileLise[i].name + '"></div>';
			$(".upload_photo").append(imgDiv);
			var imgName = document.getElementById("img" + fileLise[i].name);
			// var imgurl=window.URL.createObjectURL(fileLise[i]);
			if (fileLise && fileLise[i]) {
				var file = new FileReader();
				file.readAsDataURL(fileLise[i]);
				file.onload = function() {
					console.log(this);
					imgName.src = this.result;
				}
				arr.push($(this)[i].files[0]);
			}

			if(arr.length>=3){
				$('.add').hide();
			}else {
				$('.add').show();
			}
		}
	});
	$(document).on("click", ".imgDiv", function() {
		var index=$(this).index();
		arr.splice(index-1,1);
		$(this).remove();
		if(arr.length<3){
			$('.add').show();
		}
	});
				

$.get('/meiyou/getFaBujin',function(data){
			console.log(data.num);
			$('.select-b>p span').text(data.num);
			
});

$('input[name="tZdtime"]').keyup(function(){
	var tZdtime=$('input[name="tZdtime"]').val();
	$.post('/meiyou/ZhiDingfei',{tZdtime:tZdtime},function(data){
		console.log(data.ZhiDingfei);
		$('.ZhiDingfei span').text(data.ZhiDingfei);
	});
});
$('.fabu').click(function () {
        var fbprice=parseInt($('.select-b>p span').text());
        var xsprice=parseInt($('input[name="tMeijin"]').val());
        var zdprice=parseInt($('.ZhiDingfei span').text());
        var price=fbprice+xsprice+zdprice;
        $('.top-up-box>p span').text('￥'+price);
    })
	

	$('.enter-close').click(function(){
		$('#paymentpaw').hide();
	});
	$('#submit').click(function () {
		$('#paymentpaw').show();
	});
	$('.queding').click(function(){
		var formData= new FormData();
		var fbprice=parseInt($('.select-b>p span').text());
        var xsprice=parseInt($('input[name="tMeijin"]').val());
		var tName=$('input[name="tName"]').val();
		var tAddress=$('input[name="tAddress"]').val();
		var tProduce=$('textarea[name="tProduce"]').val();
		var tMeijin=parseInt(fbprice+xsprice);
		var tMsmeijin=$('input[name="tMsmeijin"]').val();
		var tZdtime=$('input[name="tZdtime"]').val();
		var pay=$('input[name="pay"]').val();
		var ZhiDingfei = parseInt($('.ZhiDingfei span').text());
		var wd=localStorage.getItem("wd");
	    var jd=localStorage.getItem("jd"); 
	    console.log(fbprice);
	    console.log(xsprice); 
	    console.log(tName); 
	    console.log(tAddress); 
	    console.log(tProduce); 
	    console.log(tMeijin); 
	    console.log(tZdtime); 
	    console.log(pay); 
	    console.log(ZhiDingfei); 
	    console.log(wd);
	    console.log(jd);                				
		for(var i=0;i<arr.length;i++){
				formData.append('mfile',arr[i]);
		}
		formData.append('tName',tName);
		formData.append('tMeijin',tMeijin);
		formData.append('tMsmeijin',tMsmeijin);
		formData.append('tZdtime',tZdtime);
		formData.append('tAddress',tAddress);
		formData.append('pay',pay);
		formData.append('tProduce',tProduce);
		formData.append('weidu',wd);
		formData.append('jindu',jd);
		formData.append('ZhiDingfei',ZhiDingfei);
		$.ajax({
			url: "/meiyou/insTuiNa",
			data:formData,
			type: "Post",
	        cache: false,//上传文件无需缓存
	        processData: false,//用于对data参数进行序列化处理 这里必须false
	        contentType: false, //必须
	        success: function (data) {
	        	if(data.code==100){
	        		layer.msg(data.msg,{icon:6,time:1000},function(){
	        		window.location.reload();
	        	})
	        	}else{
	        		layer.msg(data.msg,{icon:5,time:1000})
	        	}
	        	
	        	console.log(data)
	        }
	    })
	}); 
	
</script>
